<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>保险商城 - 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .product-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .product-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        .banner-slide {
            scroll-snap-align: start;
            flex: none;
            width: 100%;
        }
        .banner-container {
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .banner-container::-webkit-scrollbar {
            display: none;
        }
        .tab-active {
            background-color: #3b82f6;
            color: white;
        }
        .tab-inactive {
            background-color: #f3f4f6;
            color: #6b7280;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 顶部导航栏 -->
    <div class="bg-white border-b sticky top-0 z-50">
        <div class="flex items-center justify-between px-4 py-3">
            <div class="flex items-center">
                <i class="fas fa-shield-alt text-blue-600 text-xl mr-2"></i>
                <h1 class="text-lg font-bold text-gray-900">保险商城</h1>
            </div>
            <div class="flex items-center gap-4">
                <i class="fas fa-search text-gray-600 text-lg"></i>
                <i class="fas fa-bell text-gray-600 text-lg"></i>
                <i class="fas fa-user-circle text-gray-600 text-lg"></i>
            </div>
        </div>
    </div>

    <!-- 轮播图区域 -->
    <div class="relative">
        <div class="banner-container overflow-x-auto flex" id="bannerContainer">
            <div class="banner-slide">
                <div class="w-full h-40 bg-gray-100 flex items-center justify-center">
                    <img src="../头图.jpeg" alt="保险推广" class="w-full h-full object-cover">
                </div>
            </div>
            <div class="banner-slide">
                <div class="w-full h-40 bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
                    <div class="text-center text-white">
                        <h2 class="text-xl font-bold mb-2">专业保险服务</h2>
                        <p class="text-sm opacity-90">为您和家庭提供全方位保障</p>
                    </div>
                </div>
            </div>
            <div class="banner-slide">
                <div class="w-full h-40 bg-gradient-to-r from-green-500 to-blue-500 flex items-center justify-center">
                    <div class="text-center text-white">
                        <h2 class="text-xl font-bold mb-2">理赔快速便捷</h2>
                        <p class="text-sm opacity-90">在线申请，快速审核</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 轮播指示器 -->
        <div class="absolute bottom-3 left-1/2 transform -translate-x-1/2 flex space-x-2">
            <div class="w-2 h-2 rounded-full bg-white opacity-70" id="indicator0"></div>
            <div class="w-2 h-2 rounded-full bg-white opacity-30" id="indicator1"></div>
            <div class="w-2 h-2 rounded-full bg-white opacity-30" id="indicator2"></div>
        </div>
    </div>

    <!-- 快捷菜单 -->
    <div class="bg-white mx-4 mt-4 rounded-lg p-4 shadow-sm">
        <div class="grid grid-cols-4 gap-4">
            <div class="text-center" onclick="goToFunction('products')">
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-th-large text-blue-600 text-lg"></i>
                </div>
                <span class="text-xs text-gray-700">产品库</span>
            </div>
            <div class="text-center" onclick="goToFunction('customers')">
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-users text-green-600 text-lg"></i>
                </div>
                <span class="text-xs text-gray-700">客户管理</span>
            </div>
            <div class="text-center" onclick="goToFunction('policies')">
                <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-file-contract text-purple-600 text-lg"></i>
                </div>
                <span class="text-xs text-gray-700">我的保单</span>
            </div>
            <div class="text-center" onclick="goToFunction('messages')">
                <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-envelope text-orange-600 text-lg"></i>
                </div>
                <span class="text-xs text-gray-700">我的消息</span>
            </div>
        </div>
    </div>

    <!-- 产品分类标签 -->
    <div class="px-4 mt-6">
        <div class="flex space-x-2 overflow-x-auto pb-2">
            <button class="tab-active px-4 py-2 rounded-full text-sm whitespace-nowrap" onclick="switchTab('all')">
                全部产品
            </button>
            <button class="tab-inactive px-4 py-2 rounded-full text-sm whitespace-nowrap" onclick="switchTab('family')">
                家财险
            </button>
            <button class="tab-inactive px-4 py-2 rounded-full text-sm whitespace-nowrap" onclick="switchTab('accident')">
                意外险
            </button>
            <button class="tab-inactive px-4 py-2 rounded-full text-sm whitespace-nowrap" onclick="switchTab('health')">
                健康险
            </button>
        </div>
    </div>

    <!-- 产品列表 -->
    <div class="px-4 mt-4 pb-20">
        <div class="space-y-4" id="productList">
            <!-- 燃气险产品 -->
            <div class="product-card bg-white rounded-lg p-4 shadow-sm border" onclick="goToProduct('gas')">
                <div class="flex items-start">
                    <img src="../列表图标.png" alt="燃气险" class="w-16 h-16 rounded-lg mr-4 object-cover">
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-1">
                            <h3 class="font-semibold text-gray-900">液化气用户家财险</h3>
                            <div class="text-right">
                                <div class="text-orange-500 text-xs">热销</div>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600 mb-2">室内财产损失、人身意外身故/残疾、人身意外身故残疾及意外医疗（三者）、意外医疗保障</p>
                        <div class="flex items-center justify-between">
                            <div class="text-xs text-gray-500">人保财险</div>
                            <div class="flex items-center">
                                <span class="text-red-600 font-bold">￥10</span>
                                <span class="text-xs text-gray-500 ml-1">元/份起</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他产品示例 -->
            <div class="product-card bg-white rounded-lg p-4 shadow-sm border" onclick="goToProduct('accident')">
                <div class="flex items-start">
                    <div class="w-16 h-16 bg-blue-100 rounded-lg mr-4 flex items-center justify-center">
                        <i class="fas fa-shield-alt text-blue-600 text-2xl"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-1">
                            <h3 class="font-semibold text-gray-900">综合意外险</h3>
                            <div class="text-right">
                                <div class="text-green-500 text-xs">推荐</div>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600 mb-2">意外身故伤残、意外医疗、住院津贴全覆盖</p>
                        <div class="flex items-center justify-between">
                            <div class="text-xs text-gray-500">平安产险</div>
                            <div class="flex items-center">
                                <span class="text-red-600 font-bold">￥128</span>
                                <span class="text-xs text-gray-500 ml-1">起</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="product-card bg-white rounded-lg p-4 shadow-sm border" onclick="goToProduct('home')">
                <div class="flex items-start">
                    <div class="w-16 h-16 bg-green-100 rounded-lg mr-4 flex items-center justify-center">
                        <i class="fas fa-home text-green-600 text-2xl"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-1">
                            <h3 class="font-semibold text-gray-900">家庭财产保险</h3>
                        </div>
                        <p class="text-sm text-gray-600 mb-2">房屋建筑、室内财产、家电家具全方位保障</p>
                        <div class="flex items-center justify-between">
                            <div class="text-xs text-gray-500">人保财险</div>
                            <div class="flex items-center">
                                <span class="text-red-600 font-bold">￥66</span>
                                <span class="text-xs text-gray-500 ml-1">起</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="product-card bg-white rounded-lg p-4 shadow-sm border" onclick="goToProduct('travel')">
                <div class="flex items-start">
                    <div class="w-16 h-16 bg-purple-100 rounded-lg mr-4 flex items-center justify-center">
                        <i class="fas fa-plane text-purple-600 text-2xl"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-1">
                            <h3 class="font-semibold text-gray-900">境内旅游险</h3>
                        </div>
                        <p class="text-sm text-gray-600 mb-2">旅行意外、医疗救援、行李延误保障</p>
                        <div class="flex items-center justify-between">
                            <div class="text-xs text-gray-500">太保产险</div>
                            <div class="flex items-center">
                                <span class="text-red-600 font-bold">￥15</span>
                                <span class="text-xs text-gray-500 ml-1">起</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="product-card bg-white rounded-lg p-4 shadow-sm border" onclick="goToProduct('health')">
                <div class="flex items-start">
                    <div class="w-16 h-16 bg-red-100 rounded-lg mr-4 flex items-center justify-center">
                        <i class="fas fa-heartbeat text-red-600 text-2xl"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-1">
                            <h3 class="font-semibold text-gray-900">百万医疗险</h3>
                            <div class="text-right">
                                <div class="text-blue-500 text-xs">新品</div>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600 mb-2">住院医疗、特殊门诊、癌症治疗保障</p>
                        <div class="flex items-center justify-between">
                            <div class="text-xs text-gray-500">众安保险</div>
                            <div class="flex items-center">
                                <span class="text-red-600 font-bold">￥268</span>
                                <span class="text-xs text-gray-500 ml-1">起</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2">
        <div class="flex justify-around items-center">
            <!-- 首页 -->
            <div class="flex flex-col items-center space-y-1 cursor-pointer" onclick="goToHome()">
                <i class="fas fa-home text-blue-600 text-lg"></i>
                <span class="text-xs text-blue-600">首页</span>
            </div>
            
            <!-- 产品 -->
            <div class="flex flex-col items-center space-y-1 cursor-pointer" onclick="goToProducts()">
                <i class="fas fa-box text-gray-600 text-lg"></i>
                <span class="text-xs text-gray-600">产品</span>
            </div>
            
            <!-- 展业 -->
            <div class="flex flex-col items-center space-y-1 cursor-pointer" onclick="goToBusiness()">
                <i class="fas fa-briefcase text-gray-600 text-lg"></i>
                <span class="text-xs text-gray-600">展业</span>
            </div>
            
            <!-- 我的 -->
            <div class="flex flex-col items-center space-y-1 cursor-pointer" onclick="goToProfile()">
                <i class="fas fa-user text-gray-600 text-lg"></i>
                <span class="text-xs text-gray-600">我的</span>
            </div>
        </div>
    </div>

    <!-- 为了防止内容被底部导航栏遮挡，添加底部padding -->
    <div class="h-16"></div>

    <script>
        // 轮播图自动播放
        let currentSlide = 0;
        const slides = 3;
        let autoPlayInterval;

        function updateIndicators() {
            for (let i = 0; i < slides; i++) {
                const indicator = document.getElementById(`indicator${i}`);
                if (i === currentSlide) {
                    indicator.classList.remove('opacity-30');
                    indicator.classList.add('opacity-70');
                } else {
                    indicator.classList.remove('opacity-70');
                    indicator.classList.add('opacity-30');
                }
            }
        }

        function nextSlide() {
            currentSlide = (currentSlide + 1) % slides;
            const container = document.getElementById('bannerContainer');
            container.scrollTo({
                left: currentSlide * container.offsetWidth,
                behavior: 'smooth'
            });
            updateIndicators();
        }

        function startAutoPlay() {
            autoPlayInterval = setInterval(nextSlide, 4000);
        }

        function stopAutoPlay() {
            clearInterval(autoPlayInterval);
        }

        // 监听轮播图滚动
        document.getElementById('bannerContainer').addEventListener('scroll', function() {
            const container = this;
            const slideIndex = Math.round(container.scrollLeft / container.offsetWidth);
            if (slideIndex !== currentSlide) {
                currentSlide = slideIndex;
                updateIndicators();
            }
        });

        // 分类标签切换
        function switchTab(category) {
            // 更新标签样式
            const tabs = document.querySelectorAll('button[onclick^="switchTab"]');
            tabs.forEach(tab => {
                tab.classList.remove('tab-active');
                tab.classList.add('tab-inactive');
            });
            event.target.classList.remove('tab-inactive');
            event.target.classList.add('tab-active');

            // 这里可以添加根据分类筛选产品的逻辑
            console.log('切换到分类:', category);
        }

        // 产品点击跳转
        function goToProduct(productType) {
            if (productType === 'gas') {
                window.location.href = 'home.html';
            } else {
                // 其他产品的跳转逻辑
                console.log('跳转到产品:', productType);
            }
        }

        // 快捷功能点击处理
        function goToFunction(functionType) {
            switch(functionType) {
                case 'products':
                    console.log('跳转到产品库');
                    // 可以跳转到产品列表页面
                    break;
                case 'customers':
                    console.log('跳转到客户管理');
                    // 可以跳转到客户管理页面
                    break;
                case 'policies':
                    console.log('跳转到我的保单');
                    // 可以跳转到保单列表页面
                    break;
                case 'messages':
                    console.log('跳转到我的消息');
                    // 可以跳转到消息中心页面
                    break;
                default:
                    console.log('未知功能:', functionType);
            }
        }

        // 页面加载完成后启动轮播
        document.addEventListener('DOMContentLoaded', function() {
            startAutoPlay();
            
            // 鼠标悬停时停止自动播放
            const bannerContainer = document.getElementById('bannerContainer');
            bannerContainer.addEventListener('mouseenter', stopAutoPlay);
            bannerContainer.addEventListener('mouseleave', startAutoPlay);
        });

        // 底部导航功能
        function goToHome() {
            // 当前已在首页，刷新页面或无需操作
            window.location.reload();
        }

        function goToProducts() {
            // 产品页面功能，暂时显示提示
            alert('产品页面');
        }

        function goToBusiness() {
            // 展业页面功能，暂时显示提示
            alert('展业页面');
        }

        function goToProfile() {
            // 我的页面功能，暂时显示提示
            alert('我的页面');
        }
    </script>
</body>
</html>